<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<!-- https://www.jq22.com/yanshi21940 服务反馈,商品订单评价 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .star {
        cursor: pointer;
    }


    .service ul li {
        list-style: none;
        float: left;
        margin-right: 20px;
        width: 145px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        border: 1px solid #ccc;
        margin-bottom: 20px;
    }

    .textarea textarea {
        width: 100%;
        height: 200px;
        border: 1px solid #ccc;
    }
</style>

<body>
    <div id="app">
        <div class="box" style="width: 800px;height: 800px;border: 2px solid red; margin: 0 auto; padding: 22px;">
            <h3 style="color: black;border-bottom: 1px dashed #ccc;padding: 20px 0;">
                给“新闻订单”的评价
            </h3>
            <p style="margin: 40px 0;">请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</p>
            <div class="high" style="margin: 20px 0; height: 30px;">
                    <span>
                        <img class="star" src="./xx.png" alt="" @mouseover="show(0);showA(0, true)"
                            @mouseout="showA(0, false)" @click="showB(0)">
                        <img class="star" src="./xx.png" alt="" @mouseover="show(1);showA(1, true)"
                            @mouseout="showA(1, false)" @click="showB(1)">
                        <img class="star" src="./xx.png" alt="" @mouseover="show(2);showA(2, true)"
                            @mouseout="showA(2, false)" @click="showB(2)">
                        <img class="star" src="./xx.png" alt="" @mouseover="show(3);showA(3, true)"
                            @mouseout="showA(3, false)" @click="showB(3)">
                        <img class="star" src="./xx.png" alt="" @mouseover="show(4);showA(4, true)"
                            @mouseout="showA(4, false)" @click="showB(4)">
                    </span>
                    <span style="margin: 0 20px; color: #f36a5a; line-height: 20px;">{{a}}</span>
                </div>
                <div class="tit"
                    style="background-color: #f3f3f3;height: 50px; line-height: 50px;padding-left: 20px;margin: 40px 0;">
                    <p>本次交易，乖，摸摸头 给您留下了什么印象呢？</p>
                </div>
                <dir class="service">
                    <ul>
                        <li>专业水平高</li>
                        <li>交付准时</li>
                        <li>效果明显</li>
                        <li>数据分析准确</li>
                        <li>能力待提高</li>
                        <li>工期延误</li>
                    </ul>
                </dir>

                <div class="textarea" style="position: relative;">
                    <textarea name="" id="" cols="30" rows="10" v-model="text" @input="item"></textarea>
                    <span style="position: absolute; bottom: 6%; right: 6%; color: #ccc; font-size: 14px;">
                        还可以输入<span style="color: red">{{index > 0? index : 0}}</span>个字
                    </span>
                </div>

                <button @click="add"
                    style="width: 160px;height: 50px;background-color: #f36a5a;margin: 20px 0;float: right;border: none; border-radius: 10px;color: #fff;">评价完成</button>
            </div>
        </div>
</body>
<script>
    const { createApp, ref } = Vue;
    createApp({
        setup() {
            const a = ref('')
            const list = ['差评', '较差', '中等', '一般', '好评']
            const rate = ref(-1)

            const Max = 10;
            const text = ref('')
            const index = ref(Max)

            function show(index) {
                a.value = list[index]
            }

            function showB(index) {
                rate.value = index;
                const stars = document.querySelectorAll('.star')
                stars.forEach((star, i) => {
                    star.src = i <= index ? './x2.png' : './xx.png';
                })
            }

            function showA(index, isHover) {
                const stars = document.querySelectorAll('.star');
                stars.forEach((star, i) => {
                    star.src = (rate.value !== -1 && i <= rate.value) || isHover && i <= index ? './x2.png' : './xx.png';
                })
            }



            function item() {
                const len = text.value.length;
                index.value = Max - len;
                if (len > Max) {
                    text.value = text.value.slice(0, Max)
                }
            }
            const add = () => {
                alert('感谢您的评价！么么哒(* ￣3)(ε￣ *)')
            }

            return {
                a,
                show,
                showB,
                showA,
                text,
                index,
                item,
                add

            }
        }

    }).mount('#app')
</script>

</html>